<template>
	<div class="expert">
		<mt-header fixed title="专家查询">
		  <router-link to="/" slot="left">
			<mt-button icon="back">返回</mt-button>
		  </router-link>
		  <!-- <mt-button icon="more" slot="right"></mt-button> -->
		</mt-header>
		<mt-search :show="true" v-model="searchValue"></mt-search>
		<mt-index-list>
		  <mt-index-section v-for="(pinyin,pyIndex) in searchPinyinArr" :key="pyIndex" :index="pinyin">
				<!-- filter筛选 -->
				<mt-cell v-for="(item,index) in searchExperts.filter(item=>item.index == searchPinyinArr[pyIndex])" :key="index">
					<div style="display: inherit;align-items: center;width: 100%;" @click="toExpertInfo(item.id)">
						<img :src="item.avatar">
						<div class="right">
							<p style="font-weight: 700;color: #2C3E50;">{{item.name}}</p>
							<p>{{item.job}}</p>
						</div>
					</div>
				</mt-cell>
		  </mt-index-section>
		</mt-index-list>
	</div>
</template>

<script>
import pinyin4js from 'pinyin4js';	//汉字转拼音
import { Toast } from 'mint-ui';
export default{
	name:"expertList",
	data(){
		return {
			experts:[],
			searchExperts:[],
			pinyinArr:[],
			searchPinyinArr:[],
			searchValue:"",
		}
	},
	mounted(){
		//专家数据
		this.$http.get("experts.json").then(res=>{
			let expertsData = res.data
			//排序
			let experts = expertsData.sort(function(a,b){ //排序
				return a.name.localeCompare(b.name,"zh")
			})
			//将所有专家首字母放到数组（无重复项）
			let pinyinSet = new Set()
			//找出首字母
			experts.forEach(item=>{
				item.index = pinyin4js.getShortPinyin(item.name[0]).toUpperCase()
				pinyinSet.add(item.index)
			})
			//保存
			this.experts = experts
			this.searchExperts = experts
			this.pinyinArr = [...pinyinSet]
			this.searchPinyinArr = [...pinyinSet]
		}).catch(err=>{
			console.log(err)
			Toast({
				message: "服务器请求失败",
				duration: 1000
			})
		})
	},
	
	//搜索监听
	watch:{
		searchValue(val){
			let newList = this.experts.filter(item=>item.name.includes(val))
			//将所有专家首字母放到数组（无重复项）
			let pinyinSet = new Set()
			//找出首字母
			newList.forEach(item=>{
				item.index = pinyin4js.getShortPinyin(item.name[0]).toUpperCase()
				pinyinSet.add(item.index)
			})
			//保存
			this.searchExperts = newList
			this.searchPinyinArr = [...pinyinSet]
		}
	},
	
	//详情页
	methods:{
		toExpertInfo(id){
			this.$router.push('/expertInfo?id='+id)	//跳转到专家详情
		}
	}
}

</script>

<style lang="scss">
.expert{
	.mint-header.is-fixed {
		z-index: 2;
	}
	.mint-searchbar {
		padding: 1px 0;
	}
	.mint-search {
		margin-top: 40px;
		height: auto;
	}
	.mint-searchbar-inner{
		height: 40px;
		.mintui-search {
			font-size: 20px;
		}
	}
	.mint-searchbar-core{
		font-size:20px;
	}
	.mint-searchbar-cancel {
		color: #666;
		margin-right: 10px;
	}
	.mint-indexsection-index {
		text-align: left;
	}
	.mint-cell img{
		width:3.75rem;
		height:3.75rem;
		border-radius: 50%;
	}
	.mint-cell .right{
		margin-left:0.625rem;
		p{
			text-align: left;
		}
	}
	.mint-cell-value {
		padding: 0.2rem 0;
		width: 100%;
	}
}
</style>
